export enum ResizeArea {
  TOP = 'top',
  TOP_RIGHT = 'top-right',
  RIGHT = 'right',
  BOTTOM_RIGHT = 'bottom-right',
  BOTTOM = 'bottom',
  BOTTOM_LEFT = 'bottom-left',
  LEFT = 'left',
  TOP_LEFT = 'top-left',
}

export function useResizeable() {
  const resizeable = ref(true)
  const isMouseDown = ref(false)

  function handleMouseDown(area: ResizeArea) {
    isMouseDown.value = true
    console.log(area)
    window.electron.ipcRenderer.send('offset-window:mouse-down', { area })
  }

  function handleMouseUp(area: ResizeArea) {
    isMouseDown.value = false
    console.log(area)
    window.electron.ipcRenderer.send('offset-window:mouse-up')
  }

  function handlerMouseOver(_area: ResizeArea){
    if (!isMouseDown.value) {
      window.electron.ipcRenderer.send('offset-window:mouse-up')
    }
  }

  onMounted(() => {
    window.electron.ipcRenderer.on('offset-window:mouse-move', (_event, { x, y }) => {
      if (isMouseDown.value) {
        console.log(x, y)
      }
    })
  })

  onUnmounted(() => {
    window.electron.ipcRenderer.removeAllListeners('offset-window:mouse-move')
  })

  return [
    resizeable,
    {
      handleMouseDown,
      handleMouseUp,
      handlerMouseOver
    }
  ] as const
}
